<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
    }

    .cover {
        position: fixed;
        width: 100%;
        height: 100%;
        background: #B6BBC0;
        padding: 0px;
        margin: 0px;
    }

    .layer {
        text-align: center;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 500px;
        height: 300px;
        background: cornflowerblue;
    }

    .title {
        text-align: center;
        height: 30px;
        background: #006666;
        cursor: move;
    }

    .closeBtn {
        position: absolute;
        bottom: 5px;
    }
</style>
<script type="text/javascript">
    window.onload = function () {

        var layer = document.getElementsByClassName("layer")[0];
        var title = layer.children[0];

        title.onmousedown = function (e) {
            var e = e || event;
            var x = e.offsetX,
                y = e.offsetY;
          
            // 在整个页面上添加移动事件
            document.onmousemove = function (e) {
                var e = e || event;
                // 去掉margin
                layer.style.margin = 0;
                
                // 计算偏移量，限定拖拽范围到浏览器，一般left偏移量为 鼠标的pageX-offsetX
                var _left = Math.min(Math.max(e.pageX - x, 0), window.innerWidth - layer.offsetWidth);
                var _top = Math.min(Math.max(e.pageY - y, 0), window.innerHeight - layer.offsetHeight);

                layer.style.left = _left + "px";
                layer.style.top = _top + "px";
            
            }
        }
        document.onmouseup = function () {
            document.onmousemove = null;
        }
        
    }
    function closeLayer() {
            var cover = document.getElementsByClassName("cover")[0];
            cover.style.display = "none";
        }
</script>

<body>
    <div class="cover">
        <div class="layer">
            <div class="title">窗口标题</div>
            <button class="closeBtn" onclick="closeLayer()">关闭</button>
        </div>
    </div>

</body>

</html>